<template>
	<view class="order_detail pages">
		<!-- 顶部空余 -->
		<view style="width: 100%;height: var(--status-bar-height);background-color: #2b2c3c;"></view>
		<view class="order_header">
			<view class="back">
				<uni-icons type="back" size="24" color="#fff" @tap="back"></uni-icons>
			</view>
			<view class="order_title">{{order.status_str}}</view>
			<view class="order_info">{{info.status_desc}}</view>
		</view>
		<view class="order_content">
			<!-- 地址 -->
			<view class="sort_address">
				<view class="sort_address_header">
					<view class="sort_address_title">
						<uni-icons type="calendar" style="margin-right: 6rpx;"></uni-icons>
						<text>{{$t('order.order.Brand')}}</text>
					</view>
					<!-- <view class="sort_address_time">
						计划<text style="color: #16a5af;">4月24日</text>送达
					</view> -->
				</view>
				<view class="sort_address_content">
					<view class="user_info">
						<uni-icons type="location" class="address_icon"></uni-icons>
						<text>
							{{addressinfo.name}} 
							<text style="margin: 0 10rpx 0 30rpx;">{{$t('order.order.Add')}}{{addressinfo.phone_ex}}</text>
							{{addressinfo.phone}}
						</text>
					</view>
					<view class="address">
						{{addressinfo.province}}{{addressinfo.city}}{{addressinfo.area}}{{addressinfo.street}}{{addressinfo.address}}
					</view>
				</view>
			</view>
			<!-- 商品详情 -->
			<view class="sort_detail">
				<view class="sort_detail_header">
					<uni-icons type="star" style="margin-right: 6rpx;"></uni-icons>
					<text>{{$t('order.order.Brand')}}</text>
				</view>
				<view v-for="item in product" :key="item.id">
					<view class="goods_detail">
						<view class="goods_img">
							<image :src="item.good_mainimg" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="goods_content">
							<view class="goods_title">{{item.good_name}}</view>
							<view class="goods_size">
								<text>{{item.sku_name}}</text>
								<text style="margin-left: 10rpx;">{{$t('order.order.Num')}}</text>
								<text>{{item.nums}}</text>
							</view>
						</view>
						<view class="goods_money">￥{{item.good_price}}</view>
					</view>
					<view class="flex" style="justify-content: flex-end;margin: 0 20rpx 20rpx;">
						<view class="del_btn" style="font-size: 22rpx;" v-show="info.pay_btn!=1" @click="toSelectSer(order.id,item.id)">{{$t('order.order.Apply')}}</view>
						<view class="del_btn" style="font-size: 22rpx;" v-show="info.wuliu_btn==1" @click="openStep(order.id)">{{$t('order.order.See')}}</view>
					</view>
				</view>
				<view class="express">
					<view class="express_title">{{$t('order.order.Fee')}}</view>
					<view class="express_money">{{order.expmoney}}</view>
				</view>
				<view class="money">
					<text>{{$t('order.order.True')}}</text>
					<text>￥{{(order.realmoney*1).toFixed(2)}}</text>
				</view>
			</view>
			<!-- 订单详情 -->
			<view class="sort_order">
				<view class="sort_order_title">
					{{$t('order.order.Msg')}}
				</view>
				<view class="sort_order_content">
					<view class="order_content_item">
						<view>{{$t('order.order.dNum')}}</view>
						<view>
							<text>{{order.orderno}}</text>
							<text class="copy" @tap="copy(order.orderno)">{{$t('order.order.Copy')}}</text>
						</view>
					</view>
					<view class="order_content_item" v-show="!!order.usernote">
						<view>{{$t('order.order.Bei')}}</view>
						<view>{{order.usernote}}</view>
					</view>
					<view class="order_content_item">
						<view>{{$t('order.order.Discount')}}</view>
						<view>￥{{order.yh_money}}</view>
					</view>
					<view class="order_content_item">
						<view>{{$t('order.order.Time')}}</view>
						<view>{{order.addtime_str}}</view>
					</view>
					<view class="order_content_item" v-show="!!order.paytime_str">
						<view>{{$t('order.order.payTime')}}</view>
						<view>{{order.paytime_str}}</view>
					</view>
					<view class="order_content_item" v-show="!!order.sendtime_str">
						<view>{{$t('order.order.Delivery')}}</view>
						<view>{{order.sendtime_str}}</view>
					</view>
					<view class="order_content_item" v-show="!!order.confirmtime_str">
						<view>{{$t('order.order.Fishily')}}</view>
						<view>{{order.confirmtime_str}}</view>
					</view>
					<view class="order_content_item" v-show="!!order.closetime_str">
						<view>{{$t('order.order.Close')}}</view>
						<view>{{order.closetime_str}}</view>
					</view>
					<view class="order_content_item">
						<view>{{$t('order.order.Status')}}</view>
						<view>{{order.status_str}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order_footer">
			<view class="del_btn" v-show="info.pay_btn==1" @click="orderPayinfo(order.id,true)">
				{{$t('order.order.statusPay')}}
			</view>
			<view class="del_btn" v-show="info.shouhuo_btn==1" @click="confirm(order.id,false)">
				{{$t('order.order.Take')}}
			</view>
			<view class="del_btn" v-show="info.cancel_btn==1" @click="orderCancel(order.id)">
				{{$t('order.order.Cancel')}}
			</view>
			<view class="del_btn" v-show="info.delete_btn==1" @click="orderDelete(order.id)">
				{{$t('order.order.Delete')}}
			</view>
		</view>
		<uni-transition mode-class="fade" :show="payinfoShow" class="mask" :duration="200">
			<view class="mask_container">
				<view class="mask_title">
					{{$t('order.order.statusPay')}}
				</view>
				<input type="password" :placeholder="$t('order.order.anWod')" v-model="payinfo.payPassword">
				<view class="mask_btn">
					<view class="cancel" @tap="payinfoShow=false">
						{{$t('order.order.Cancels')}}
					</view>
					<view class="confirm" @tap="payOrder" v-if="payOrderShow">
						{{$t('order.order.Pay')}}￥{{payinfo.money}}
					</view>
					<view class="confirm" @tap="orderConfirm" v-else>
						{{$t('order.order.Sure')}}
					</view>
				</view>
			</view>
		</uni-transition>
		<u-popup :show="stepShow" round="10" @close="closeStep">
			<view class="step_content">
				<view class="step_title">
					{{$t('order.order.Progress')}}
				</view>
				<view class="step_item" v-for="(item,index) in timeinfo" :key="index">
					<view class="left">
						<view class="status">
							<view class="status_inner"></view>
						</view>
					</view>
					<view class="step_item_content">
						<view class="step_content_header">
							<view>{{item.status_str}}</view>
							<view>{{item.time_str}}</view>
						</view>
						<view class="step_content_content">{{item.content}}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { orderDetail, orderPayinfo, orderPay, orderCancel, orderDelete, orderConfirm, orderExpinfo } from '@/api/api.js'
	export default {
		data() {
			return {
				info: {},
				order: {},
				addressinfo: {},
				product: [],
				payinfoShow: false,
				payinfo: {},
				payOrderShow: true,
				stepShow: false,
				timeinfo: []
			}
		},
		onLoad(option) {
			orderDetail({
				token: uni.getStorageSync('token'),
				order_id: option.id,
			}).then(res=>{
				this.info = res.data.data
				this.order = this.info.order
				this.addressinfo = this.info.addressinfo
				this.product = this.info.product
			})
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: function() {}
				});
			},
			openStep(id) {
				this.stepShow = true
				orderExpinfo({
					token: uni.getStorageSync('token'),
					ordid: id
				}).then(res=>{
					this.timeinfo = res.data.data
				})
			},
			closeStep() {
				this.stepShow = false
			},
			// 支付
			orderPayinfo(order_id){
				this.payOrderShow = blo
				orderPayinfo({
					token: uni.getStorageSync('token'),
					ordid: order_id
				}).then(res=>{
					this.payinfo = res.data.data
					this.payinfoShow = true
				})
			},
			payOrder(){
				orderPay({
					token: uni.getStorageSync('token'),
					ordid: this.payinfo.ordid,
					security_password: this.payinfo.payPassword
				}).then(res=>{
					this.payinfoShow = false
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/shop/order/orderList?key=2"
						})
					}, 600)
				})
			},
			// 取消
			orderCancel(order_id){
				orderCancel({
					token: uni.getStorageSync('token'),
					ordid: order_id
				}).then(res=>{
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/shop/order/orderList?key=0"
						})
					}, 600)
				})
			},
			// 删除
			orderDelete(order_id){
				orderDelete({
					token: uni.getStorageSync('token'),
					ordid: order_id
				}).then(res=>{
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/shop/order/orderList?key=0"
						})
					}, 600)
				})
			},
			// 确认
			confirm(order_id,blo){
				this.payinfoShow = true
				this.payOrderShow = blo
				this.payinfo.ordid = order_id
			},
			orderConfirm(){
				orderConfirm({
					token: uni.getStorageSync('token'),
					ordid: this.payinfo.ordid,
					security_password: this.payinfo.payPassword
				}).then(res=>{
					this.payinfoShow = false
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/shop/order/orderList?key=0"
						})
					}, 600)
				})
			},
			toSelectSer(ordid,og_id){
				uni.navigateTo({
					url: `/pages/shop/order/afterSales/selectService?ordid=${ordid}&og_id=${og_id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-popup[data-v-3a231fda]{
		flex: 0
	}
	.flex{
		display: flex;
		align-items: center;
	}
	.order_detail {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f5f5f9;

		.order_header {
			width: 100%;
			background-color: #2b2c3c;
			color: #fff;
			padding: 40rpx 40rpx 90rpx;

			.back {
				height: 48rpx;
				display: flex;
				align-items: center;

				.uni-icons {
					transform: translate(-20%, 0);
				}
			}

			.order_title {
				font-size: 44rpx;
				margin-top: 30rpx;
			}

			.order_info {
				font-size: 24rpx;
				line-height: 26rpx;
				opacity: 0.9;
				font-weight: 400;
				margin-top: 30rpx;
			}
		}

		.order_content {
			width: 100%;
			flex: 1;
			overflow: auto;
			margin-top: -54rpx;
			padding: 0 20rpx 20rpx;

			.sort_address {
				background: #fff;
				position: relative;
				z-index: 3;
				border-radius: 4rpx;

				.sort_address_header {
					width: 100%;
					height: 108rpx;
					border-bottom: 2rpx solid #f5f5f9;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 24rpx;
					font-size: 28rpx;
					font-weight: 600;
				}

				.sort_address_content {
					padding: 40rpx 50rpx 40rpx 70rpx;
					overflow: hidden;

					.user_info {
						font-size: 28rpx;
						font-weight: 600;
						line-height: 28rpx;
						position: relative;

						.address_icon {
							position: absolute;
							left: -40rpx;
							top: 45%;
							transform: translateY(-50%);
						}
					}

					.address {
						font-size: 24rpx;
						color: #888888;
						line-height: 24rpx;
						margin-top: 20rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}

			.sort_detail {
				background: #fff;
				border-radius: 4rpx;
				margin: 20rpx 0;


				.sort_detail_header {
					width: 100%;
					height: 108rpx;
					border-bottom: 2rpx solid #f5f5f9;
					line-height: 106rpx;
					padding: 0 24rpx;
					font-size: 28rpx;
					font-weight: 600;
				}

				.goods_detail {
					display: flex;
					font-size: 28rpx;
					padding: 30rpx 30rpx 0;

					.goods_img {
						width: 160rpx;
						height: 160rpx;
						border: 2rpx solid #f9f9fa;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-shrink: 0;

						uni-image {
							width: 100%;
						}
					}

					.goods_content {
						flex: 1;
						padding: 0 30rpx;
						display: flex;
						flex-direction: column;
						// justify-content: space-between;

						.goods_title {
							font-size: 24rpx;
							line-height: 26rpx;
							font-weight: 600;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.goods_size {
							font-size: 24rpx;
							color: #888888;
							margin-top: 5rpx;
						}

						.goods_discounts {
							display: flex;
							flex-wrap: wrap;

							.discounts_item {
								display: flex;
								align-items: center;
								font-size: 28rpx;
								line-height: 26rpx;
								color: #ff5e5e;
								font-weight: bold;
							}
						}
					}

					.goods_money {
						font-weight: 600;
						line-height: 28rpx;
						text-align: right;
					}
				}

				.express {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: 100rpx;
					border: 2rpx solid #f7f7f9;
					border-left: none;
					border-right: none;
					font-size: 28rpx;
					padding: 0 30rpx;

					.express_title {
						// font-weight: 600;
					}

					.express_money {
						font-size: 24rpx;
						line-height: 24rpx;

						uni-text:nth-child(1) {
							color: #888888;
							text-decoration: line-through;
							padding-right: 6rpx;

						}
					}
				}

				.money {
					width: 100%;
					height: 120rpx;
					padding: 0 30rpx;
					line-height: 120rpx;
					text-align: right;

					uni-text:nth-child(1) {
						font-size: 24rpx;

					}

					uni-text:nth-child(2) {
						font-size: 28rpx;
						font-weight: 600;
					}

				}
			}

			.sort_order {
				padding: 40rpx 20rpx 30rpx;
				background: #fff;

				.sort_order_title {
					font-size: 32rpx;
					font-weight: 600;

				}

				.sort_order_content {
					.order_content_item {
						margin-top: 40rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						uni-view:nth-child(1) {
							font-size: 28rpx;
							color: #2b2c3c;

						}

						uni-view:nth-child(2) {
							font-size: 24rpx;
							color: #999999;
							font-weight: 400;

							uni-text:nth-child(2) {
								display: inline-block;
								border: 2rpx solid #999999;
								padding: 0 4rpx;
								margin-left: 10rpx;
							}
						}
					}
				}
			}
		}

		.order_footer {
			padding: 20rpx 40rpx 30rpx;
			background: #fff;
			display: flex;
			flex-direction: row-reverse;
		}
	}
	.del_btn {
		font-size: 28rpx;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
		border: 2rpx solid #cacad9;
		color: #888888;
		margin: 0 8rpx;
	}
	.mask {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 999;
	
		.mask_container {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 640rpx;
			height: 240rpx;
			background: #fff;
			border-radius: 12rpx;
			box-shadow: 10rpx 10rpx 20rpx 0 rgba(0, 0, 0, 0.5);
			padding: 20rpx 70rpx 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
	
			.mask_title {
				font-size: 32rpx;
				color: #666;
				text-align: center;
			}
			input{
				border-bottom: #666 1px solid;
				padding: 5rpx 10rpx;
				font-size: 34rpx;
				letter-spacing: 3px;
			}
			.mask_btn {
				display: flex;
				justify-content: space-between;
				color: #01c2c3;
				font-size: 30rpx;
				line-height: 32rpx;
			}
		}
	}
	.step_content {
		width: 100%;
		padding: 120rpx 40rpx;
	
		.step_title {
			font-size: 32rpx;
			font-weight: 600;
			padding-bottom: 60rpx;
		}
	
		.step_item {
			display: flex;
			justify-content: center;
			// align-items: center;
			width: 100%;
			padding-bottom: 40rpx;
	
			.left {
				height: 100%;
				padding: 4rpx 0 0;
	
				.status {
					width: 20rpx;
					height: 20rpx;
					background-color: transparent;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
							
					.status_inner {
						width: 12rpx;
						height: 12rpx;
						background: #aba9b6;
						border-radius: 50%;
					}
				}
			}
	
			.step_item_content {
				flex: 1;
				margin-left: 20rpx;
	
				.step_content_header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					line-height: 28rpx;
					color: #aba9b6;
	
					uni-view:nth-child(2) {
						font-size: 24rpx;
						color: #aba9b6;
					}
				}
	
				.step_content_content {
					font-size: 24rpx;
					line-height: 24rpx;
					margin-top: 10rpx;
					color: #aba9b6;
				}
			}
		}
	
		.step_item:last-child {
			.left {
				.status {
					width: 20rpx;
					height: 20rpx;
					background-color: #56a5ac;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
				
					.status_inner {
						width: 12rpx;
						height: 12rpx;
						background: #fff;
						border-radius: 50%;
					}
				}
			}
		
			.step_item_content {
		
				.step_content_header {
					color: #333333;
		
					uni-view:nth-child(2) {
						color: #333333;
					}
				}
		
				.step_content_content {
					color: #777777;
				}
			}
		}
	}
</style>